<template>
  <div>
    <div class="top">
      <p>购物车</p>
      <span @click="allDle">{{ text }}</span>
    </div>
    <ul>
      <li class="li" v-for="item in shopList" :key="item.id">
        <input
          type="checkbox"
          v-model="listBrr"
          :value="item"
          @click="Oneclick(item, item.product_id)"
          @change="Onechange"
        />
        <!-- 
        origin-price="10.00"  商品原价
       -->
        <van-card
          @click-thumb="imgClick(item.goods_id)"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
          :origin-price="item.market_price"
        >
          <!-- 相关标签 -->
          <!-- <template #tags>
            <van-tag plain type="danger">标签1</van-tag>
            <van-tag plain type="danger">标签2</van-tag>
          </template> -->
          <!-- 相关按钮 -->
          <template #footer>
            <van-button
              size="mini"
              @click="item.number--"
              :disabled="item.number == 0"
              >-</van-button
            >
            <span>{{ item.number }}</span>
            <van-button size="mini" @click="numberAdd(item, item.id)"
              >+</van-button
            >
            <van-button size="mini" @click="OneDle(item.product_id)"
              >删除商品</van-button
            >
          </template>
        </van-card>
      </li>
    </ul>
    <van-submit-bar
      :price="num * 100"
      button-text="提交订单"
      class="go"
      @submit="onSubmit"
    >
      <!-- @submit="onSubmit" -->
      <van-checkbox v-model="checked" @click="allClick">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  GetCart,
  GetChecked,
  GetDelete,
  PostChecked,
  PostUpdate,
} from "../https/http";
import { Dialog, Toast } from "vant";
export default {
  name: "Cart",
  created() {
    GetCart(localStorage.getItem("token")).then((res) => {
      console.log("5.1获取购物车信息为", res);
      this.shopList = res.data.cartList; //所有商品数组
      this.shopAbout = res.data.cartTotal; //所有商品相关
      this.num = res.data.cartTotal.checkedGoodsAmount;
      // 判断商品默认选中状态
      this.shopList.forEach((item) => {
        if (item.checked == 1) {
          this.listBrr.push(item);
        }
      });
      if (this.shopList.length == this.listBrr.length) {
        if (this.shopList.length == 0) {
          Dialog.alert({
            message: "购物车空空如也！",
          });
          return;
        }
        this.checked = true;
      } else {
        this.checked = false;
      }
    });
  },
  data() {
    return {
      shopList: [], //所有商品数组
      checked: false,
      shopAbout: [], //所有商品相关
      listBrr: [],
      num: 0,
      text: "全部删除",
    };
  },
  methods: {
    // 点击图片
    imgClick(value) {
      console.log(value);
      this.$router.push({
        name: "About",
        params: { id: value, onoff: true, num: 1 },
      });
    },
    // 提交
    onSubmit() {
      Toast.loading({
        message: "支付中...",
        duration: 1500,
      });
      setTimeout(() => {
        this.listBrr.forEach((item, index) => {
          if (index == this.listBrr.length - 1) {
            PostChecked(item.product_id).then((res) => {
              console.log(222, res);
              this.shopList = res.data.cartList;
              this.num = 0;
              Toast({
                message: "支付成功",
                duration: 1000,
              });
            });
          } else {
            PostChecked(item.product_id).then((res) => {
              console.log(res);
            });
          }
        });
      }, 1500);
    },
    // 清空购物车
    allDle() {
      this.shopList.forEach((item) => {
        PostChecked(item.product_id).then((res) => {
          console.log(res);
        });
      });
      this.$nextTick(function () {
        this.shopList = [];
        this.checked = false;
        this.num = 0;
        Dialog.alert({
          message: "购物车空空如也！",
        });
      });
    },
    // 每个复选按钮单击
    Oneclick(a, b) {
      this.$nextTick(function () {
        console.log(this.listBrr);
        // 以下代码处理请求
        let index = 0;
        if (this.listBrr.indexOf(a) == -1) {
          index = 1;
        } else {
          index = 0;
        }
        console.log(index);
        GetChecked({ isChecked: index, productIds: b }).then((res) => {
          console.log(res);
          this.num = res.data.cartTotal.checkedGoodsAmount;
        });
        // debugger;
      });

      // 变为选中状态 1 补选中 2
    },
    // 删除商品功能
    OneDle(a) {
      PostChecked(a).then((res) => {
        console.log(res);
        this.num = res.data.cartTotal.checkedGoodsAmount;
      });
      this.shopList.forEach((item, index) => {
        if (item.product_id == a) {
          this.shopList.splice(index, 1);
        }
      });
      if (this.shopList.length == 0) {
        Dialog.alert({
          message: "购物车空空如也！",
        });
        this.num = 0;
        this.checked = false;
      }
    },
    // 商品数量加 --删除请求已经发送，并成功响应，但是没有想要的结果-- click事件
    // a 代表增加商品的对象，b为对应的product_id
    numberAdd(a, b) {
      let index = 0;
      let shop = {};
      this.shopList.forEach((item) => {
        if (item.id == b) {
          item.number++ ;
          index = item.number;
          shop = item;
        }
      });
      console.log(shop);
      // ************************************************数量加请求***********************************************
      // `${index}`
      // `${shop.user_id}`
       // `${shop.user_id}`
      console.log(index, shop);
      this.$nextTick(function () {
        PostUpdate({
          goodsId: `${shop.goods_id}`,
          number:`${index}` ,
          productId: `${a.product_id}`,
          id: `${shop.user_id}`,
        }).then((res) => {
          console.log(res);
          // 有问题 
        });
      });
      // ************************************************数量加请求***********************************************
    },
    // 全选
    allClick() {
      // 如果全选
      if (this.checked) {
        this.listBrr = this.shopList;
        // 如果是全选状态 发送请求
        this.$nextTick(function () {
          this.listBrr.forEach((item, index) => {
            GetChecked({ isChecked: 1, productIds: item.product_id }).then(
              (res) => {
                console.log(res);
                if (index == this.listBrr.length - 1) {
                  this.num = res.data.cartTotal.checkedGoodsAmount;
                }
              }
            );
          });
        });
      } else {
        // 否则不全选
        let index = this.listBrr.length;
        this.listBrr.forEach((item) => {
          // 先发送请求在处理路由数据
          GetChecked({ isChecked: 0, productIds: item.product_id }).then(
            (res) => {
              console.log(index);
              if (index == 1) {
                this.num = res.data.cartTotal.checkedGoodsAmount;
              }
              index--;
            }
          );
        });
        this.$nextTick(function () {
          this.listBrr = [];
        });
      }
    },
    // 次事件为有数据请求
    Onechange() {
      if (this.listBrr.length == this.shopList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
  },
  // computed: {
  //   // 总价 虽然能请求到
  //   sumNumber() {
  //     let zongjia = 0;
  //     this.listBrr.forEach((item) => {
  //       if (item.checked == 1) {
  //         zongjia += item.retail_price;
  //       }
  //     });
  //     return zongjia;
  //   },
  // },
};
</script>

<style scoped lang="less">
.top {
  height: 35px;
  width: 100%;

  position: fixed;
  z-index: 10;
  background: #f0f0f1;
  top: 0px;
  p {
    display: block;
    height: 35px;
    width: 100%;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    // font-weight: 600;
    color: black;
    opacity: 0.9;
  }
  span {
    position: absolute;
    right: 10px;
    top: 0px;
    font-size: 14px;
    line-height: 35px;
    // display: block;
    height: 35px;
    // width: 100%;
  }
}
.li {
  height: 128px;
  background: cornflowerblue;
  position: relative;
  input {
    // appearance: radio;
    visibility: hidden;
    position: absolute;
    top: 44%;
    transform: translateY(-50%) scale(1.5);
    z-index: 1;
    margin-left: 5.5px;
  }
  input::after{
    position: absolute;
    top:0px;
    background: white;
    border:1px solid #c8c9cc;
    // border-width: 0.5px;
    // border-color: black;
    width: 14px;
    height: 14px;
    display: inline-block;
    text-align: center;
    visibility: visible;
    content:' ';
    border-radius: 50%;
  }
  input:checked::after{
    background: rgb(2,137,248);
    content:"\2713";
    color: white;
    text-align: center;
    font-size:10px;
    font-weight: 600;
  }
  .text {
    margin-top: 10px;
    color: initial;
    position: relative;
    > div:nth-of-type(1) {
      font-size: 15px;
      > div:nth-of-type(1) {
        color: red;
        > div:nth-of-type(1) {
          margin-top: 20px;
          font-size: 16px;
          color: initial;
        }
        > div:nth-of-type(2) {
          color: red;
        }
      }
    }
    > div:nth-last-of-type(1) {
      margin-bottom: 80px;
    }
  }
}
.go {
  position: fixed;
  bottom: 48px;
  height: 80px;
  z-index: 3;
  background: white;
  // background: olive;
}
ul {
  margin-top: 35px;
  padding-bottom: 90px;
}
</style>